import Taro from '@tarojs/taro';
import { useState, useEffect } from "react";
import { View, Button, Radio, RadioGroup, Label, Picker } from '@tarojs/components';
import { AtForm, AtInput, AtList, AtListItem, AtToast } from 'taro-ui';
import "taro-ui/dist/style/components/form.scss";
import "taro-ui/dist/style/components/button.scss";
import "taro-ui/dist/style/components/input.scss";
import "taro-ui/dist/style/components/radio.scss";
import "taro-ui/dist/style/components/list.scss";
import "taro-ui/dist/style/components/message.scss";
import "taro-ui/dist/style/components/toast.scss";
import "taro-ui/dist/style/components/icon.scss";
import { certification, getAllPositions, getAllOrigin } from '@/api/my';
import css from './index.module.less';
import './index.less';

export default function MyInfo() {
  const [userInfo, setUserInfo] = useState({});
  //存储当前所选择的身份
  const [identify, setIdentify] = useState(0);
  //存储所有身份
  const allIdentifies = ['积极分子', '预备党员', '党员', '书记'];
  //存储当前所选择的学院(组织)
  const [organization, setOrganization] = useState(0);
  //存储所有学院(组织)
  const [allOrganizations, setAllOrganizations] = useState([[], []]);
  //存储当前所选择的上级组织
  const [higherOrganization, setHigherOrganization] = useState(0);
  //存储所有的职务
  const [allPositions, setAllPositions] = useState([[], []]);
  //存储当前所选择的职务
  const [position, setPosition] = useState(0);
  //存储输出框输入的信息(姓名, 工号/学号, 联系方式)
  const [info, setInfo] = useState({});
  useEffect(() => {
    Taro.getStorage({
      key: 'userInfo',
      success: function (a) {
        setUserInfo(a.data);
      }
    });
    getAllPositions().then((res) => {
      if (res.code === 200) {
        const data = res.data;
        const temp = [[], []];
        data.map((v) => {
          temp[0].push(v.id);
          temp[1].push(v.name);
        });
        setAllPositions(temp);
      }
    });
    getAllOrigin().then((res) => {
      if (res.code === 200) {
        const data = res.data;
        const temp = [[], []];
        data.map((v) => {
          temp[0].push(v.organizationId);
          temp[1].push(v.organizationName);
        });
        setAllOrganizations(temp);
      }
    });
  }, []);
  const ok = (event) => {
    const v = event[0].detail.value;
    const { classification, name, studentJobNumber, contact } = v;
    // '+'为了将String转为Number
    const data = {
      classification: +classification, contact,
      higherOrganizationId: allOrganizations[0][higherOrganization],
      id: userInfo.id,
      identify: +identify, name,
      organizationId: allOrganizations[0][organization],
      postId: allPositions[0][position],
      studentJobNumber
    };
    certification(data).then(res => {
      if (res.code === 200) {
        Taro.showToast({
          title: '认证成功',
          duration: 500,
          icon: 'success',
        });
        Taro.navigateBack();
      } else {
        Taro.showToast({
          title: '认证失败',
          duration: 500,
          icon: 'none',
        });
      }
    }).catch(() => {
      Taro.showToast({
        title: '认证失败',
        duration: 500,
        icon: 'none',
      });
    });
  };
  const onChange = (event) => {
    const v = event.detail.value;
    setIdentify(v);
  };
  const onChangePosition = (event) => {
    const v = event.detail.value;
    setPosition(v);
  };
  const onChangeOrgName = (event) => {
    const v = event.detail.value;
    setOrganization(v);
  };
  const onChangeHeightOrgName = (event) => {
    const v = event.detail.value;
    setHigherOrganization(v);
  };
  return (
    <View className={css.app}>
      <AtToast />
      <AtForm
        onSubmit={ok}
      >
        <RadioGroup name='classification' className={css.radio}>
          <Label className={css.text} for='lable'>类别</Label>
          <Label for='1' key='1' value='类别'>
            <Radio id='1' value={0} checked color='#cc0f0f'>学生</Radio>
          </Label>
          <Label for='2' key='2'>
            <Radio id='2' value={1} color='#cc0f0f'>教师</Radio>
          </Label>
        </RadioGroup>
        <Picker mode='selector' range={allIdentifies} onChange={onChange} value={identify}>
          <AtList>
            <AtListItem
              title='身份'
              extraText={allIdentifies[identify]}
            />
          </AtList>
        </Picker>
        <AtInput
          name='name'
          title='姓名'
          type='text'
          placeholder='请输入姓名'
          value={info.name}
          onChange={(v) => setInfo({ ...info, name: v })}
        />
        <AtInput
          name='studentJobNumber'
          title='工号/学号'
          type='text'
          placeholder='请输入工号/学号'
          value={info.studentJobNumber}
          onChange={(v) => setInfo({ ...info, studentJobNumber: v })}
        />
        <Picker mode='selector' range={allOrganizations[1]} onChange={onChangeOrgName} value={organization}>
          <AtList>
            <AtListItem
              title='学院'
              extraText={allOrganizations[1][organization]}
            />
          </AtList>
        </Picker>
        <Picker mode='selector' range={allOrganizations[1]} onChange={onChangeHeightOrgName} value={higherOrganization}>
          <AtList>
            <AtListItem
              title='所属上级'
              extraText={allOrganizations[1][higherOrganization]}
            />
          </AtList>
        </Picker>
        <Picker mode='selector' range={allPositions[1]} onChange={onChangePosition} value={position}>
          <AtList>
            <AtListItem
              title='职务'
              extraText={allPositions[1][position]}
            />
          </AtList>
        </Picker>
        <AtInput
          name='contact'
          title='联系方式'
          type='text'
          placeholder='请输入联系方式'
          value={info.contact}
          onChange={(v) => setInfo({ ...info, contact: v })}
        />
        <Button circle formType='submit' type='primary' className={css.botton}>提交</Button>
      </AtForm>
    </View>
  );
}
